// LoadingScreen.tsx（保持原逻辑，重点看父容器适配）
import React from 'react';
import {
    View,
    Text,
    ActivityIndicator,
    StyleSheet,
    Image,
} from 'react-native';

/**
 * LoadingScreen 组件用于显示加载状态的界面。
 * 
 * @param {Object} props - 组件的属性对象。
 * @param {string} [props.message='加载中...'] - 显示在加载指示器下方的消息文本。
 * @param {boolean} [props.showLogo=true] - 是否显示 logo。
 * @param {string} [props.backgroundColor='#FFFFFF'] - 加载界面的背景颜色。
 * @param {string} [props.textColor='#333333'] - 消息文本的颜色。
 * @param {string} [props.indicatorColor='#007AFF'] - 加载指示器的颜色。
 * @param {string} [props.indicatorSize='large'] - 加载指示器的大小。
 * @param {Object} [props.style={}] - 自定义的容器样式。
 * @param {Object} [props.messageStyle={}] - 自定义的消息文本样式。
 * @param {boolean} [props.isFullScreen=false] - 是否全屏覆盖显示加载界面。
 * 
 * @returns {JSX.Element} - 渲染的加载界面组件。
 * 
 * @注意事项
 * - 若使用自定义样式，需确保不会与原有的布局和样式冲突。
 * - 当 `isFullScreen` 为 `true` 时，会覆盖父容器，需确保该行为符合需求。
 */
const LoadingScreen = ({
    message = '加载中...',
    showLogo = true,
    backgroundColor = '#FFFFFF',
    textColor = '#333333',
    indicatorColor = '#007AFF',
    indicatorSize = 'large',
    style = {},
    messageStyle = {},
    // 控制是否全屏覆盖
    isFullScreen = false,
}) => {
    return (
        <View
            style={[
                styles.container,
                { backgroundColor },
                style,
                // 全屏覆盖逻辑：优先覆盖父容器
                isFullScreen && {
                    ...StyleSheet.absoluteFillObject,
                    justifyContent: 'center',
                    alignItems: 'center',
                },
            ]}
        >
            {showLogo && (
                <View style={styles.logoContainer}>
                    <Image
                        source={require('../../assets/images/icon.png')}
                        style={styles.logo}
                        resizeMode="contain"
                    />
                </View>
            )}

            <ActivityIndicator
                size={indicatorSize}
                color={indicatorColor}
                style={styles.indicator}
            />

            <Text
                style={[styles.message, { color: textColor }, messageStyle]}
            >
                {message}
            </Text>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        // 基础布局：让内容在父容器内居中
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    logoContainer: {
        marginBottom: 24,
    },
    logo: {
        width: 100,
        height: 100,
        borderRadius: 16,
    },
    indicator: {
        marginBottom: 16,
    },
    message: {
        fontSize: 16,
        fontWeight: '500',
    },
});

export default LoadingScreen;